<template>
  <!-- 头部logo -->
  <div class="header-log">
    <SvgIcon v-if="appIdentify" class="item-icon" :name="`${appIdentify}-logo`" />
  </div>
  <!-- 资源域选择-预留 -->
  <div class="header-resource"></div>
  <!-- 头部菜单-预留 -->
  <div class="header-menu"></div>
  <div
    class="header-button"
    :style="{
      '--hover-fill': settingsStore.theme.colorPrimary
    }"
  >
    <a-popover v-model:open="notifyBox" placement="bottomRight" trigger="click">
      <template #title>
        <span>告警信息</span>
      </template>
      <template #content>
        <NotifyInfo :notifyData="notifyData" @handleClickMore="handleClickMore" />
      </template>
      <a-badge :count="notifyCount" dot>
        <SvgIcon class="notify-icon" name="notify" />
      </a-badge>
    </a-popover>
  </div>
  <div class="header-user">
    <a-dropdown :trigger="['click']">
      <a class="ant-dropdown-link" @click.prevent>
        <a-avatar :size="26">
          <template v-if="userName">
            {{ userName.slice(-1) }}
          </template>
          <template v-else>
            <UserOutlined />
          </template>
        </a-avatar>
        <span> {{ userName.length > 5 ? `${userName.slice(0, 5)}...` : userName }}</span>
      </a>
      <template #overlay>
        <a-menu>
          <a-menu-item key="logout" class="dropdown-menu-item">
            <a @click="handleLogout">
              <LoginOutlined />
              退出登录
            </a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script lang="ts" name="DefaultHeader" setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { UserOutlined, LoginOutlined } from '@ant-design/icons-vue'
import { useSettingsStore } from '@/stores/settings'
import NotifyInfo from './notify-info/index.vue'

const userStore = useUserStore()
const userName = userStore.getUserInfo.name
const settingsStore = useSettingsStore()
const appIdentify = settingsStore.getSystemIdentify()
const notifyBox = ref(false)
const notifyCount = ref(0)
const notifyData = ref([])

const handleLogout = () => {
  userStore.logout()
}

const handleClickMore = () => {
  console.log('查看更多操作')
}
</script>
<style lang="less" scoped>
.flex-row {
  display: flex;
}
.header-log {
  .flex-row;
  flex: 0 0 auto;
  width: 200px;
  .item-icon {
    width: 200px;
    height: 56px;
  }
}
.header-resource {
  .flex-row;
  flex: 0 0 auto;
  width: 150px;
  .resource-icon {
    margin: 16px 10px;
  }
}

.header-menu {
  .flex-row;
  flex: 1 0 auto;
  justify-content: flex-end;
  width: 300px;
}
.header-button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
  width: 190px;
  .notify-icon {
    width: 20px;
    cursor: pointer;
  }
  svg:hover {
    fill: var(--hover-fill) !important;
  }
}
.header-user {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  width: 140px;
  .ant-avatar {
    margin-right: 6px;
    background-color: #ebbc05;
    color: #000000;
    font-size: 16px !important;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.ant-dropdown-link {
  padding: 0 10px;
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 150px;
  height: 44px;
  &:hover {
    background: #233749;
    border-radius: 6px;
    color: var(--color-text-white);
  }
}
</style>
